<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<!-- 定位 将元素正确布局
		 1.浮动定位:左右布局
		 
		 2.相对定位：微调布局 针对单一元素 
		 position：relative：声明元素进行相对定位
		 特点：相对于父级进行定位 不脱离文档流
		 附加属性：方向属性：left top，right，botton，
		 属性值：正负数值px
		        z轴叠加属性：z-index---属性值：数值 数值越大越靠前
				
		 3.绝对定位：叠加效果 通常与相对定位搭配使用 左栏  侧边栏 遮罩层
		      左栏---挂靠点
		 position：absolute；声明元素进行绝对定位
				  特点：相对于祖先【页面左上角】进行定位
		 如果有父元素 按照父元素【左上顶角】 脱离文档流 xingchengdiejiaxiaooguo
		 使用方法：通常与相对定位搭配使用
		 
		 4.固定定位：fiexd  页面区域固定在页面上
		 相对 绝对 固定属性--附加属性全部通用  ：方向 叠加属性
		 
		 5.文档流定位：按照元素分类进行定位：块与块【纵排】
		                                行与行【横排】
										块与行【横排】
		 --> 
	<style>
	 .box1{
		width: 300px;
		height: 300px;
		background:url(img/img_1.png);
		background-size: 100%;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 100;
		
	 }
	 .box2{
		 width: 300px;
		 height: 300px;
		 background: url(img/img_4.png);
		 background-size: 100%;
		 position: absolute;
		left : 0;
		 top: 0;
		 z-index: 100;
	 }
	</style>
	</head>
	<body>
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>
